<template>
  <div class="demo-cont max-cont">
    <Row>
      <template v-for="(item,index) in lists" v-key="item">
        <Col :span="12" :class="index%2===0?'clearfix':''">
          <div class="card-item">
            <Card class="card-styl">
              <Panel :item="item"></Panel>
            </Card>
          </div>
        </Col>
      </template>
    </Row>
    <div class="pager-cont">
      <Page :total="40" class-name="page-styl" show-total show-elevator show-sizer/>
    </div>
  </div>
</template>

<script>
  import Panel from './comp/Panel'

  export default {
    name: 'official',
    components: {
      Panel
    },
    data() {
      return {
        lists: [
          {label: 'html,js,css', path: 'user/photo1.png', content: '人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在'},
          {label: 'html,js,css', path: 'user/photo2.png', content: '人在塔在'},
          {label: 'html,js,css', path: 'user/photo3.jpg', content: '人在塔在'},
          {label: 'html,js,css', path: 'user/photo4.jpg', content: '人在塔在'},
          {label: 'html,js,css', path: 'user/photo1.png', content: '人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在'},
          {label: 'html,js,css', path: 'user/photo2.png', content: '人在塔在'},
          {label: 'html,js,css', path: 'user/photo3.jpg', content: '人在塔在'},
          {label: 'html,js,css', path: 'user/photo4.jpg', content: '人在塔在'},
          {label: 'html,js,css', path: 'user/photo1.png', content: '人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在人在塔在'},
          {label: 'html,js,css', path: 'user/photo2.png', content: '人在塔在'},
          {label: 'html,js,css', path: 'user/photo3.jpg', content: '人在塔在'},
          {label: 'html,js,css', path: 'user/photo4.jpg', content: '人在塔在'}
        ]
      }
    },
    methods: {},
    created() {

    }
  }
</script>

<style scoped lang="scss">
  .demo-cont{
    padding: 14px 10px 30px;
    background-color:#f5f6f2;
    .card-item{
      padding:5px;
    }
  }
  .pager-cont{
    padding:50px 10px 10px;
    text-align :center;
    .page-styl{

    }
  }
  .clearfix{
    clear: both;
  }
</style>
